<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

</head>

<body>
  <div id="vue-one">
    <h3>第一个</h3>
    {{ title }}<br />
    {{ greet }}<br />
  </div>

  <div id="vue-two">
    <h3>第二个</h3>
    {{ title }}<br />
    {{ greet }}<br />
    <button @click="change">press</button>
  </div>
  <script>
    var one = new Vue({
      el: "#vue-one",
      data: {
        title: "i am one"
      },
      methods: {},
      computed: {
        greet: function () {
          return "hello one";
        }
      }
    });
    var two = new Vue({
      el: "#vue-two",
      data: {
        title: "i am two"
      },
      methods: {
        change: function () {
          one.title = "change one";
        }
      },
      computed: {
        greet: function () {
          return "hello two";
        }
      }
    });

    two.title = "change two"
  </script>
</body>